<template>
<h1 style="color: white;font-size:30px;">好书折扣</h1>
<el-tooltip
          effect="dark"
          placement="right"
          v-for="item in books"
          :key="item.bookId"
          style="position: absolute; margin-top: 5%;border: 1px solid white;"
        >
          <div
            style="
              font-size: 14px;
              margin-bottom: 6px;
              background-color: transparent;
            "
          >
            <p class="abstract">{{ item.remark }}</p>
            <el-card
              style="
                width: 135px;
                margin-bottom: 40px;
                height: 264px;
                float: left;
                margin-right: 100px;
              "
              class="book"
              bodyStyle="padding:10px"
              shadow="hover"
            >
              <div class="cover">
                <img
                  :src="item.bookCover"
                  alt="封面"
                  @click="clickcover(item)"
                />
              </div>
              <div class="info">
                <div class="title">
                  <a href="">{{ item.bookName }}</a>
                </div>
              </div>
              <div class="author">
                <p style="color: white" v-if="item.discount==0.1? true :false">折扣：<span style="color: #e4ff88;">一折</span> </p>
                <p style="color: white" v-if="item.discount==0.2? true :false">折扣：<span style="color: #b6cc69;">两折</span></p>
                <p style="color: white" v-if="item.discount==0.3? true :false">折扣：<span style="color: #8ea14b;">三折</span></p>
                <p style="color: white" v-if="item.discount==0.4? true :false">折扣：<span style="color: #748638;">四折</span></p>
                <p style="color: white" v-if="item.discount==0.5? true :false">折扣：<span style="color: #627425;">五折</span></p>
                <p style="color: white" v-if="item.discount==0.6? true :false">折扣：<span style="color: #505f1b;">六折</span></p>
                <p style="color: white" v-if="item.discount==0.7? true :false">折扣：<span style="color: #3f4c12;">七折</span></p>
                <p style="color: white" v-if="item.discount==0.8? true :false">折扣：<span style="color: #b0b98f;">八折</span></p>
                <p style="color: white" v-if="item.discount==0.9? true :false">折扣：<span style="color: #ffffff;">九折</span></p>

                <p style="color: white;">数量：{{ item.quantity }}</p>
              </div>
              <!-- <el-button
                class="buy"
                round
                @click="buyChangeQuantity(item), shuxing(item)"
                >购买</el-button
              > -->
            </el-card>
          </div>

          <!-- <p> -->

          <!-- </p> -->
        </el-tooltip>


</template>
<script>
export default {
  name: "FourInformation",
  data(){
    return{
      books:[]
    }
  },
  methods:{
    loaddiscountbooks(){
      this.$axios.get('/loaddiscountbooks').then(resp=>{
        this.books=resp.data
      })
    }
  },
  mounted:function(){
    this.loaddiscountbooks()
  }
};
</script>
<style scoped>
.cover {
  width: 115px;
  height: 172px;
  margin-bottom: 7px;
  overflow: hidden;
  cursor: pointer;
}

img {
  width: 115px;
  height: 172px;
  /*margin: 0 auto;*/
}

/* .title {
    font-size: 14px;
    text-align: left;
    
  } */

.author {
  color: #333;
  width: 102px;
  font-size: 13px;
  margin-bottom: 10px;
  margin-left: 5px;
  text-align: center;
}

.abstract {
  display: block;
  line-height: 17px;
}



.el-card {
  background-color: #19171791;
}

span {
  color: white;
}
.buy {
  background-color: #191717fe;
  color: white;
}
.buy:hover {
  background-color: #191717fe;
  color: white;
}
.el-pagination {
  color: #ececf0;
  background-color: transparent;
  cursor: default;
  font-weight: 700;
}

</style>